<template>
  <div id="themel" style="background-color: rgb(245, 245, 245) !important">
    <div class="bg"></div>
    <div class="top">
      <div class="haerder">
        <div class="backBtn" @click="goback()">
          <i>
            <svg
              t="1734244348886"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="4242"
              width="16"
              height="16"
            >
              <path
                d="M631.04 161.941333a42.666667 42.666667 0 0 1 63.061333 57.386667l-2.474666 2.730667-289.962667 292.245333 289.706667 287.402667a42.666667 42.666667 0 0 1 2.730666 57.6l-2.474666 2.752a42.666667 42.666667 0 0 1-57.6 2.709333l-2.752-2.474667-320-317.44a42.666667 42.666667 0 0 1-2.709334-57.6l2.474667-2.752 320-322.56z"
                fill="#515151"
                p-id="4243"
              ></path>
            </svg>
          </i>
        </div>
        <div class="title">
          <span>我的订单</span>
        </div>
        <van-cell
          style="display: inline-block; background-color: transparent !important; z-index: 1000;"
        >
          <div class="card">
            <div class="input">
              <div class="search">
                <div class="img">
                  <img
                    src="https://mall.leyifan.com/static/h5/new_images/index_search.png"
                    alt=""
                  />
                  <input type="text" placeholder="请输入转运单号/商品ID" />
                </div>
              </div>
            </div>
            <div class="filtrate"  @click="showPopup">
              <div class="img">
                <img src="https://mall.leyifan.com/static/h5/new_images/icon_filter.png" alt="" />
              </div>
              <div class="text">
                <span>筛选</span>
              </div>
            </div>
          </div>
        </van-cell>
        <van-popup
          v-model:show="show"
          round
          closeable
          position="bottom"
          :style="{ height: '40vh' }"
        >
          <div>
            <p style="text-align: center; padding: 21rem 12rem">订单筛选</p>
            <div style="padding: 0 16rem; margin-bottom: 40rem">
              <p style="margin-bottom: 10rem">下单日期</p>
              <van-cell :value="date" @click="show1 = true" style="padding: 0">
                <div
                  style="
                    display: flex;
                    align-items: center;
                    width: 100%;
                    height: 41rem;
                    border-radius: 10rem;
                    padding: 0 10rem;
                    border: 1px solid #ccc;
                  "
                >
                  <img
                    style="width: 18rem; height: 18rem; margin-right: 30rem"
                    src="https://mall.leyifan.com/static/h5/new_images/icon_filter.png"
                    alt=""
                  />
                  <div
                    style="
                      width: 90rem;
                      height: 39rem;
                      line-height: 39rem;
                      color: #999;
                      text-align: center;
                      font-size: 14rem;
                    "
                  >
                  {{ startTime || '开始时间' }}
                  </div>
                  <div style="margin: 0 25rem">-</div>
                  <div
                    style="
                      width: 90rem;
                      height: 39rem;
                      line-height: 39rem;
                      color: #999;
                      text-align: center;
                      font-size: 14rem;
                    "
                  >
                  {{ endTime || '结束时间' }}
                  </div>
                </div>
              </van-cell>
              <van-calendar v-model:show="show1" type="range" @confirm="onConfirm" />
            </div>
            <div style="padding: 10rem 14rem; display: flex; justify-content: space-between">
              <button
                style="
                  width: 160rem;
                  height: 41rem;
                  color: #999;
                  background-color: #f5f5f5;
                  border: transparent;
                  border-color: #ccc;
                  border-radius: 20rem;
                "
                  @click="resetTime"
              >
                重置
              </button>
              <button
                style="
                  width: 160rem;
                  height: 41rem;
                  color: #fff;
                  background-color: #ccc;
                  border: transparent;
                  border-color: #ccc;
                  border-radius: 20rem;
                "
                  @click="confirmTime"
              >
                确认
              </button>
            </div>
          </div>
        </van-popup>

        <div class="newNav">
          <div class="tabs" style="display: flex; justify-content: space-around">
            <span
              v-for="(tab, index) in tabs"
              :key="index"
              :class="{ active: activeTab === index }"
              @click="selectTab(index)"
            >
              {{ tab.title }}
            </span>
          </div>
        </div>
        <div
          class="my-order"
          style="background-color: rgb(245, 245, 245) !important; height: 100vh"
        >
          <div v-if="activeTab === 0">
            <div v-if="orderItems.length > 0 && isOrderSubmitted == false">
              <div
                v-for="order in orderItems"
                :key="order.id"
                style="padding: 10rem 14rem; background-color: #f5f5f5"
              >
                <div style="padding: 14rem 10rem; background-color: #fff; border-radius: 10rem">
                  <div style="display: flex; justify-content: space-between; padding-bottom: 10rem">
                    <img
                      style="width: 66rem; height: 18rem; border-radius: 10rem"
                      src="https://image1.leyifan.cn/reborn-mall-cdn/crmebimage/public/config/2024/12/12/d533b2efe4b34dc4bcd77f8e63dce59ebaq9l2l0n4.png"
                      alt=""
                    />
                    <span style="font-size: 12rem">未支付</span>
                  </div>
                  <div style="display: flex; align-items: center">
                    <img style="width: 65rem" :src="order.imgurl" alt="" />
                    <div style="margin-left: 10rem">
                      <span
                        style="
                          display: inline-block;
                          font-size: 14rem;
                          width: 240rem;
                          overflow: hidden;
                          white-space: nowrap;
                          text-overflow: ellipsis;
                        "
                        >{{ order.name }}</span
                      ><span>x{{ order.num }}</span>
                      <div style="font-size: 12rem">
                        <span>{{ order.price }}日元 </span>
                        <span style="margin-left: 5rem; color: #999">
                          (約{{ Math.round(order.price * 0.0049) }}人民币)</span
                        >
                      </div>
                    </div>
                  </div>
                  <div style="margin: 15rem 0">
                    <div style="text-align: right; font-size: 12rem">
                      <span>实付款: &nbsp;</span>
                      <span style="color: red; font-size: 20rem; font-weight: 700">{{
                        order.price
                      }}</span>
                      <span style="color: red">日元 </span>
                      <span>&nbsp; (約{{ Math.round(order.price * 0.0049) }}人民币)</span>
                    </div>
                  </div>
                  <div style="text-align: right; font-size: 12rem; margin-top: 20rem">
                    <button
                      style="
                        border: 0;
                        width: 76rem;
                        height: 32rem;
                        border-radius: 20rem;
                        border: 1rem solid #999;
                        background-color: transparent;
                      "
                    >
                      复制ID
                    </button>
                    <button
                      style="
                        border: 0;
                        width: 76rem;
                        height: 32rem;
                        border-radius: 20rem;
                        margin-left: 10rem;
                        border: 1rem solid #999;
                        background-color: transparent;
                      "
                    >
                      取消订单
                    </button>
                    <button
                      style="
                        border: 0;
                        width: 76rem;
                        height: 32rem;
                        border-radius: 20rem;
                        margin-left: 10rem;
                        color: red;
                        border: 1rem solid red;
                        background-color: transparent;
                      "
                      @click="buy()"
                    >
                      立即付款
                    </button>
                  </div>
                </div>
              </div>
            </div>
            <div v-else>
              <div style="padding-top: 83rem; text-align: center">
                <img
                  style="width: 115rem"
                  src="https://mall.leyifan.com/static/h5/new_images/empty.png"
                  alt=""
                />
                <p style="font-size: 12rem; color: #aaaaaa">暂无订单信息</p>
              </div>
            </div>
          </div>

          <div v-if="activeTab === 1">
            <div style="padding-top: 83rem; text-align: center" v-if="!isOrderSubmitted">
              <img
                style="width: 115rem"
                src="https://mall.leyifan.com/static/h5/new_images/empty.png"
                alt=""
              />
              <p style="font-size: 12rem; color: #aaaaaa">暂无订单信息</p>
            </div>
            <div v-else>
              <div
                v-for="order in orderItems"
                :key="order.id"
                style="padding: 10rem 14rem; background-color: #f5f5f5"
              >
                <div style="padding: 14rem 10rem; background-color: #fff; border-radius: 10rem">
                  <div style="display: flex; justify-content: space-between; padding-bottom: 10rem">
                    <img
                      style="width: 66rem; height: 18rem; border-radius: 10rem"
                      src="https://image1.leyifan.cn/reborn-mall-cdn/crmebimage/public/config/2024/12/12/d533b2efe4b34dc4bcd77f8e63dce59ebaq9l2l0n4.png"
                      alt=""
                    />
                    <span style="font-size: 12rem">已支付</span>
                  </div>
                  <div style="display: flex; align-items: center">
                    <img style="width: 65rem" :src="order.imgurl" alt="" />
                    <div style="margin-left: 10rem">
                      <span
                        style="
                          display: inline-block;
                          font-size: 14rem;
                          width: 240rem;
                          overflow: hidden;
                          white-space: nowrap;
                          text-overflow: ellipsis;
                        "
                        >{{ order.name }}</span
                      ><span>x{{ order.num }}</span>
                      <div style="font-size: 12rem">
                        <span>{{ order.price }}日元 </span>
                        <span style="margin-left: 5rem; color: #999">
                          (約{{ Math.round(order.price * 0.0049) }}人民币)</span
                        >
                      </div>
                    </div>
                  </div>
                  <div style="margin: 15rem 0">
                    <div style="text-align: right; font-size: 12rem">
                      <span>实付款: &nbsp;</span>
                      <span style="color: red; font-size: 20rem; font-weight: 700">{{
                        order.price
                      }}</span>
                      <span style="color: red">日元 </span>
                      <span>&nbsp; (約{{ Math.round(order.price * 0.0049) }}人民币)</span>
                    </div>
                  </div>
                  <!-- <div style="text-align: right; font-size: 12rem; margin-top: 20rem">
                    <button
                      style="
                        border: 0;
                        width: 76rem;
                        height: 32rem;
                        border-radius: 20rem;
                        border: 1rem solid #999;
                        background-color: transparent;
                      "
                    >
                      复制ID
                    </button>
                    <button
                      style="
                        border: 0;
                        width: 76rem;
                        height: 32rem;
                        border-radius: 20rem;
                        margin-left: 10rem;
                        border: 1rem solid #999;
                        background-color: transparent;
                      "
                    >
                      取消订单
                    </button>
                    <button
                      style="
                        border: 0;
                        width: 76rem;
                        height: 32rem;
                        border-radius: 20rem;
                        margin-left: 10rem;
                        color: red;
                        border: 1rem solid red;
                        background-color: transparent;
                      "
                      @click="buy()"
                    >
                      立即付款
                    </button>
                  </div> -->
                </div>
              </div>
            </div>
          </div>
          <div v-if="activeTab === 2">
            <div style="padding-top: 83rem; text-align: center" v-if="!isOrderSubmitted">
              <img
                style="width: 115rem"
                src="https://mall.leyifan.com/static/h5/new_images/empty.png"
                alt=""
              />
              <p style="font-size: 12rem; color: #aaaaaa">暂无订单信息</p>
            </div>
            <div v-else>
              <div
                v-for="order in orderItems"
                :key="order.id"
                style="padding: 10rem 14rem; background-color: #f5f5f5"
              >
                <div style="padding: 14rem 10rem; background-color: #fff; border-radius: 10rem">
                  <div style="display: flex; justify-content: space-between; padding-bottom: 10rem">
                    <img
                      style="width: 66rem; height: 18rem; border-radius: 10rem"
                      src="https://image1.leyifan.cn/reborn-mall-cdn/crmebimage/public/config/2024/12/12/d533b2efe4b34dc4bcd77f8e63dce59ebaq9l2l0n4.png"
                      alt=""
                    />
                    <span style="font-size: 12rem">待收货</span>
                  </div>
                  <div style="display: flex; align-items: center">
                    <img style="width: 65rem" :src="order.imgurl" alt="" />
                    <div style="margin-left: 10rem">
                      <span
                        style="
                          display: inline-block;
                          font-size: 14rem;
                          width: 240rem;
                          overflow: hidden;
                          white-space: nowrap;
                          text-overflow: ellipsis;
                        "
                        >{{ order.name }}</span
                      ><span>x{{ order.num }}</span>
                      <div style="font-size: 12rem">
                        <span>{{ order.price }}日元 </span>
                        <span style="margin-left: 5rem; color: #999">
                          (約{{ Math.round(order.price * 0.0049) }}人民币)</span
                        >
                      </div>
                    </div>
                  </div>
                  <div style="margin: 15rem 0; text-align: right">
                    <div style="text-align: right; font-size: 12rem">
                      <span>实付款: &nbsp;</span>
                      <span style="color: red; font-size: 20rem; font-weight: 700">{{
                        order.price
                      }}</span>
                      <span style="color: red">日元 </span>
                      <span>&nbsp; (約{{ Math.round(order.price * 0.0049) }}人民币)</span>
                    </div>
                    <button
                      style="
                        margin-left: auto;
                        font-size: 14rem;
                        background-color: #ff3d58;
                        border: 0;
                        border-radius: 20rem;
                        padding: 5rem 10rem;
                        color: white;
                      "
                      @click="confirmAndReceive(order)"
                    >
                      确认并收货
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div v-if="activeTab === 3">
            <div
              style="padding-top: 83rem; text-align: center"
              v-if="finishstore && finishstore.length === 0"
            >
              <img
                style="width: 115rem"
                src="https://mall.leyifan.com/static/h5/new_images/empty.png"
                alt=""
              />
              <p style="font-size: 12rem; color: #aaaaaa">暂无订单信息</p>
            </div>
            <div v-else style="overflow: scroll; height: 667rem;padding-bottom: 170rem;">
              <div
                v-for="order in finishstore"
                :key="order.id"
                style="padding: 10rem 14rem; background-color: #f5f5f5"
              >
                <div style="padding: 14rem 10rem; background-color: #fff; border-radius: 10rem">
                  <div style="display: flex; justify-content: space-between; padding-bottom: 10rem">
                    <img
                      style="width: 66rem; height: 18rem; border-radius: 10rem"
                      src="https://image1.leyifan.cn/reborn-mall-cdn/crmebimage/public/config/2024/12/12/d533b2efe4b34dc4bcd77f8e63dce59ebaq9l2l0n4.png"
                      alt=""
                    />
                    <span style="font-size: 12rem">已支付</span>
                  </div>
                  <div style="display: flex; align-items: center">
                    <img style="width: 65rem" :src="order.imgurl" alt="" />
                    <div style="margin-left: 10rem">
                      <span
                        style="
                          display: inline-block;
                          font-size: 14rem;
                          width: 240rem;
                          overflow: hidden;
                          white-space: nowrap;
                          text-overflow: ellipsis;
                        "
                        >{{ order.name }}</span
                      ><span>x{{ order.num }}</span>
                      <div style="font-size: 12rem">
                        <span>{{ order.price }}日元 </span>
                        <span style="margin-left: 5rem; color: #999">
                          (約{{ Math.round(order.price * 0.0049) }}人民币)</span
                        >
                      </div>
                    </div>
                  </div>
                  <div style="margin: 15rem 0">
                    <div style="text-align: right; font-size: 12rem">
                      <span>实付款: &nbsp;</span>
                      <span style="color: red; font-size: 20rem; font-weight: 700">{{
                        order.price
                      }}</span>
                      <span style="color: red">日元 </span>
                      <span>&nbsp; (約{{ Math.round(order.price * 0.0049) }}人民币)</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="my-order"></div>
  </div>
</template>


<script lang="ts" setup>
import { onMounted, ref, type Ref } from 'vue'
import { useRoute } from 'vue-router'
import router from '@/router'
// import axios from '@/api/axios'
import { useCartStore } from '@/stores/useCartStore'
import { showToast } from 'vant'

const cartStore = useCartStore()
// storeId.value = cartStore.cartItems[0]?.id
// console.log(storeId.value)
import { useOrderStore } from '@/stores/useOrderStore'

// const route = useRoute()
// const storeId: Ref<any> = ref(null)
// const imges: Ref<any> = ref([])
// const wenben: Ref<string> = ref('')
// const lsf: Ref<any> = ref([])
// const orders: Ref<any> = ref([])
const isOrderSubmitted = ref(false)
isOrderSubmitted.value = localStorage.getItem('isOrderSubmitted') === 'true'
const orderItems = ref([])
const date = ref('')
const show1 = ref(false)
const startTime = ref('');
const endTime = ref('');


const onConfirm = (dates: [Date, Date]) => {
  const [start, end] = dates;
  startTime.value = start.toLocaleDateString();
  endTime.value = end.toLocaleDateString();
  show1.value = false;
  showToast('日期选择成功');
};

const resetTime = () => {
  startTime.value = '';
  endTime.value = '';
  showToast('日期已重置');
};

const confirmTime = () => {
  if (startTime.value && endTime.value) {
    showToast('时间已保存');
    show.value = false;
  } else {
    showToast('请选择时间范围');
  }
}

const show = ref(false)
const showPopup = () => {
  show.value = true
}

const tabs = ref([
  { title: '待支付', data: [], loading: false },
  { title: '已支付', data: [], loading: false },
  { title: '待收货', data: [], loading: false },
  { title: '已完成', data: [], loading: false },
])
const activeTab = ref(0)

const goback = () => {
  router.push('/my')
}
const selectTab = (index: number) => {
  activeTab.value = index
}

onMounted(() => {
  fetchOrders()
})

const buy = function () {
  router.push({
    path: '/placeorder',
  })
}

const fetchOrders = () => {
  const storedOrderItems = localStorage.getItem('orderItems')
  if (storedOrderItems) {
    try {
      orderItems.value = JSON.parse(storedOrderItems)
      console.log(orderItems.value)
    } catch (error) {
      console.error('解析 orderItems 失败', error)
    }
  }
}

const orderStore = useOrderStore()

const confirmAndReceive = (order: any) => {
  // 从 orderItems 中移除该商品
  orderItems.value = orderItems.value.filter((item) => item.id !== order.id)

  // 更新本地存储
  localStorage.setItem('orderItems', JSON.stringify(orderItems.value))

  // 添加到已收货订单
  setlocalfinishstore(order)
  finishstore.value = JSON.parse(localStorage.getItem('finishstore'))
}
const setlocalfinishstore = (item) => {
  let finishstore = JSON.parse(localStorage.getItem('finishstore') || '[]')
  localStorage.setItem('finishstore', JSON.stringify([...finishstore, item]))
}
let finishstore = ref([])
finishstore.value = JSON.parse(localStorage.getItem('finishstore'))
</script>


<style scoped lang="less">
#themel {
  // background-color: #f5f5f5 !important;
  position: relative;
  height: 140rem;
  padding-top: 0rem;
  border-bottom: unset;
  .bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 124rem;
    background-image: url(https://mall.leyifan.com/static/h5/new_images/shopping_bg.png);
    background-size: cover;
    z-index: 100;
  }
  .top {
    width: 373rem;
    height: 41rem;
    min-height: 41rem;
    .haerder {
      .backBtn {
        width: 30rem;
        height: 41rem;
        z-index: 100;
        position: absolute;
        left: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        padding-left: 13rem;
      }
      .title {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: 100%;
        font-size: 14rem;
        height: 40rem;
        color: #333333;
        font-weight: 700;
      }
      .card {
        padding: 0 13rem;
        margin-top: 13rem;
        display: flex;
        justify-content: center;
        border-radius: 4rem;
        height: 37rem;
        box-sizing: border-box;
        .input {
          flex: 1;
          display: flex;
          align-items: center;
          height: 37rem;
          border-radius: 7rem;
          padding: 0 9rem;
          background-color: rgba(51, 51, 51, 0.06);
          .search {
            width: 21rem;
            height: 21rem;
            margin-right: 5rem;
          }
          input {
            font-size: 12rem;
            line-height: normal;
            flex: 1;
            position: absolute;
            background-color: transparent;
            border: none;
            margin-top: 2rem;
          }
        }
        .filtrate {
          padding-top: 2rem;
          margin-left: 13rem;
          display: flex;
          flex-direction: column;
          align-items: center;
          font-size: 11rem;
          font-family: Source Han Sans CN, Source Han Sans CN-400;
          font-weight: 400;
          text-align: left;
          color: #c6c4c2;
          width: 20rem;
          height: 35rem;
          .img {
            width: 20rem;
            height: 20rem;
            img {
              width: 20rem;
              height: 20rem;
            }
          }
          .text {
            color: #333;
            line-height: 9rem;
            span {
              margin-bottom: 4rem;
              font-size: 9rem;
            }
          }
        }
      }
      .newNav {
        white-space: nowrap;
        height: 37rem;
        padding: 0 5rem;
        box-sizing: border-box;
        .tabs {
          display: flex;
          span {
            padding: 10rem 10rem;
            cursor: pointer;
            font-size: 12rem;
            &.active {
              font-weight: bold;
              position: relative;
              &::after {
                content: '';
                position: absolute;
                background: linear-gradient(270deg, #fff9d2, #ff8192);
                border-radius: 2rem;
                height: 5rem;
                top: 50%;
                transform: translateY(50%);
                left: 9rem;
                right: 0;
                opacity: 0.9;
                z-index: -1;
              }
            }
          }
        }
      }
    }
  }
}
</style>